/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/*
 * Copyright (c) 2015, Joyent, Inc.
 */

@import "bootstrap.less";
@import "variables.less";

@sidebar-width: 160px;


@import "lib/typeahead.js-bootstrap.less";
@import "lib/bootstrap-datetimepicker.less";
@import "lib/chosen.js-bootstrap.less";
@import "lib/rickshaw.less";
@import "lib/font-awesome.less";
@import "lib/bootstrap-tags.less";
@import "lib/epoch.0.5.2.min.less";



@import "signin.less";
@import "notifications.less";
@import "typeahead.less";

@import "images-list.less";
@import "servers-list.less";
@import "image-import.less";
@import "user-preview.less";
@import "alarms.less";
@import "alarm.less";

@import "error-alert";

@import "vm.less";
@import "vms.less";

@import "image.less";
@import "settings.less";

@import "job-progress.less";

@import "dashboard.less";

@import "users.less";
@import "user.less";

@import "networking.less";
@import "networks.less";
@import "network.less";
@import "fabrics.less";

@import "packages.less";
@import "package.less";

@import "server.less";
@import "servers.less";
@import "server-boot-options.less";
@import "server-disk-utilization.less";
@import "server-memory-utilization.less";

@import "services.less";

@import "jobs.less";
@import "job.less";

@import "provision.less";

@import "fwrules-list.less";
@import "fwrules-form.less";
@import "nictag.less";

@import "nictags.less";
@import "notes-component.less";
@import "link-aggr-component.less";
@import "nic-config-component.less";
@import "provisioning-limits.less";

@import "manta.less";


html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

label { font-weight: 300; }


.btn-link.disabled {
  color: @gray-light;
}

.text-warning { background: lighten(@state-warning-bg, 4%) ;}

.modal-content {
  .box-shadow(none);
  border-radius: 0;
  border: none;
}

a, input[type="checkbox"] {
  cursor: pointer;
}

.widget-header {
  background: #e8e8e8;
  color: #888888;
}

.widget-content {
  background: #fcfcfc;
  padding: 10px 14px;
}

.page-header {
  margin-top: 20px;
  overflow: hidden;
  border: none;

  .resource-status {
    &>span {
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 12px;
      color: #FFF;
      padding: 4px 6px;
      background: #222;
      font-weight: bold;
    }
  }

  h1 {
    font-size: 26px;
    font-weight: 300;

    .uuid {
      text-transform: lowercase;
      font-family: @font-family-monospace;
      font-size: 12px;
    }

    .actions { font-size: 18px; .pull-right; }
  }

  &+.actions {
    .pull-right;
    margin-top: -94px;
    position: relative;
    z-index: 50;
  }
}

// Headings
// -------------------------

h1 { font-size: 28px; }
h2 { font-size: 24px; font-weight: 300; }
h3 { font-size: 21px; font-weight: 200; }
h4 { font-size: 18px; font-weight: 200; }
h5 { font-size: 14px; font-weight: 200; }
h6 { font-size: 12px; font-weight: 200; }

h1 small { font-size: 24px; }
h2 small { font-size: 18px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }

h3 .actions {
  display: inline-block;
  float: right;
  .btn-link {
    font-size: 18px;
  }
}

.alert {
  h4.alert-heading { font-weight: 400; font-size: 13px; }
  ul li { font-size: 13px;}
}
.zero-state {
  .widget-content;
  color: @gray-light;
}
.zero-state + button { margin-top: @line-height-base/2;}


table.vertical { tr, td { border: none;}}
.record-summary {
  text-align: left;
  text-transform: uppercase;
  font-size: 12px;
  color: #888;
  padding: 8px 12px;
}

.table {
  margin-bottom: 0;
  caption {
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    color: #aaa;
    padding: 8px 12px;
  }

  tr.selected { background: #fff2da; }

  td, th { border: none; }

  thead {
    tr {
      border: none;
    }
    th {
      background: #e8e8e8;
      color: darken(#aaa, 30%);
      padding: 6px 12px;
      font-size: 13px;
      font-weight: normal;
      text-transform: uppercase;
    }
  }
  tbody {
    tr { background: #fcfcfc; }
    th { font-weight: 400; color: #888;}
  }
}

.error-modal {
  border: 1px solid red;
  .modal-header {
    background: red;
    color: #FFF;
  }
  pre { font-size: 10px; line-height: 1.5;}
}


h1.branding {
  .product { color: #ff6600; font-weight: 300; font-weight: bold; }
  font-size: 14px;
  font-weight: 200;
  text-transform: uppercase;
}

#adminui {
  min-height: 100%;
  background: #f2f2f2;
}

#wrapper { transition: all 0.2s ease 0s; }
#wrapper.with-sidebar {
  padding-left: @sidebar-width;
}

#wrapper .chrome {
  padding-left: 30px;
  padding-right: 30px;
}

#content-container {
  width: 100%;
}

#content {
  padding-top: 70px;
  padding-bottom: @line-height-computed;
  section { margin-bottom: 2em; }
}
#footer { height: 24px; background: #dfe7ec; }

.localnav-body {
  display: table-column-group;
}
#localnav-container {
  position: fixed;
  display: table;
  background: #434343;
  height: 100%;
  top: 60px;
  width: @sidebar-width;
  margin-left: -(@sidebar-width);
}

#localnav::-webkit-scrollbar {
  width: 6px;
}

#localnav::-webkit-scrollbar-track {
  background: #000;
  border-radius: 4px;
}

#localnav::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #aaa;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

#localnav {
  overflow-y: auto;
  width: @sidebar-width;
  bottom: 0;
  padding: 0;

  ul.nav>li.nav-header {
    color: #C2C2C2;
    margin-top: 25px;
    text-transform: uppercase;
    padding: 5px;
    padding-left: 10px;
    font-size: 10px;
    background: transparent;
    border: none;
  }
  ul.nav>li { background: none; }
  ul.nav>li>a {
    background: #4C4C4C;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 1px;
    font-size: 12px;
    color: #D5D5D5;
    i {
      margin-right: 3px;
    }
  }
  ul.nav>li.active a,
  ul.nav>li.active a:hover { background: #F1F1F1; color: #434343; }
  ul.nav>li:hover>a { background: #4a4a4a; color: #d5d5d5; }
}

#server-time {
  background: #4C4C4C;
  padding-top: 7px;
  padding-bottom: 67px;
  font-size: 11px;
  color: #D5D5D5;
  display: table-cell;
  width: 160px;
  height: 89px;
  font-weight: 500;
  text-align: center;
  i { margin-right: 5px;}
}

#rootnav > .navbar {
  z-index: 100;
  position: fixed;
  width: 100%;
  margin-bottom: 0;
  background: #5D646B;
  border: none;
  border-bottom: 8px solid #434343;
  .navbar-brand { padding: 12px; padding-left: 5px; padding-right: 5px; }

  h1.branding {
    .product { font-size: 10px; color: #FF9300; font-weight: 300; }
    .ops-portal { margin-left: 10px; line-height: 18px; text-transform: capitalize; font-size: 14px; display: block; color: #FFF; }
    .datacenter { display: inline-block; font-weight: bold;}
    text-align: left;
    margin: 0;
  }

  .acc-controls {
    margin:0;
    padding:0;
    font-size: 12px;

    a {
      padding-top: 14px;
      padding-bottom: 14px;
      cursor: pointer;
      color: #eee;
    }
    a.current-user {
      display: inline-block;
      width: auto;
      vertical-align: middle;
      padding-left: 25px;
      padding-right: 25px;

      .name {
        vertical-align: middle;
        display: inline-block;
        .cn, .login-name { display: block;}
        .login-name { font-size: 10px; }
      }

      .user-icon {
        width: 32px;
        height: 32px;
        border: 1px solid #fff;

        background-color: #FFF;
        background-position: 50% 50%;
        background-repeat: no-repeat;

        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10px;
        display: inline-block;
      }
    }


    a.signout { padding-left: 15px; padding-right: 10px; display: inline-block; }
    .active {
      background: #434343;
      color: #fff;
    }
  }



  .main-nav {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    min-height: 0;

    li a {
      padding: 14px 20px;
      padding-top: 20px;
      padding-bottom: 12px;
      text-transform: uppercase;
      text-shadow: none;
      font-size: 12px;
      height: 60px;
      display: block;
      text-transform: uppercase;
      color: #eee;
      .box-shadow(none);
    }
    li a small {
      display: block;
      line-height: 1em;
      font-size: 10px;
      color: #aaa;
    }
    li.active {
      padding-bottom: 0;
    }
    li.settings { margin-left: 10px;}
    li.active a {
      font-weight: 500;
      background: #434343;
      color: #fff;
    }
    li:hover.active a { }
  }

  .navbar-alert {
    color: red;
  }

} // rootnav

.filter-panel {
  .box-sizing(border-box);
  padding: 10px;
}

.resize-vm {
  .modal-body {
    overflow: visible;
  }
}

.package-preview {
  background: #fff;
  padding: 8px 8px;
  width: 300px;
  margin-top: 1em;
  font-size: 13px;
  .title { font-weight: bold; font-size: 14px;}

  strong, span { display: inline-block; }
  strong { font-weight: normal; width: 140px;}
  span { font-weight: bold; }
}

/** Attributes styling **/
ul.attributes {
  margin-bottom: 0;
  li+li { }
  li {
    .widget-content;
    strong {
      .opacity(60);
      display: inline-block;
      width: 180px;
    }

    .value {
      display: inline-block;
    }
    .editable-field .editable-value {
      margin-left: 50px;
    }
    .uuid {
      font-family: @font-family-monospace;
      font-size: 12px;
    }
  }
}

#network-create-modal {
  .add-route { display: block; margin: 5px; cursor: pointer;}
  .remove-route { cursor: pointer; padding-left: 5px; padding-right: 5px;}
}

.probes {
  ul { .clearfix; }
  li {
    padding: 0.5em 0;
    .status {
      display: inline-block;
      width: 20px;
      margin-right: 10px;
      background: @gray-light;
      border-radius: 10px;
    }
    .status.open {
      background: @state-warning-bg;
    }
    .name { display: inline-block; width: 220px; font-weight:bold; }
    .type { display: inline-block; width: 140px; }
  }

  .delete-probe { cursor: pointer; }
}


.tags-container {
  td.key { width: 140px;}
  .add-tag { margin-top: 10px;}
}

.metadata-list {
  overflow: auto;
  td.key { width: 140px;}
  td.value {
    a.view { cursor: pointer; }
    span.value {
      font-family: @font-family-monospace;
      font-size: @font-size-small;
      line-height: 1;
      white-space: pre;
      display: block;
      overflow: auto;
      max-height: 360px;
      cursor: default;
      padding: 5px;
    }
    textarea.value {
      font-family: @font-family-monospace;
      font-size: @font-size-small;
      line-height: 1;
      width: 100%;
      .box-sizing(border-box);
      height: 30px;
      padding: 8px;
      max-height: 360px;
    }
  }
}

.metadata-view {
  .modal-body {
    background: @gray-darker;
    color: @gray-lighter;
    font-family: @font-family-monospace;
    line-height: 1.2;
    font-weight: normal;
    white-space: pre;
  }
}
.metadata-edit {
  input {
    border: none;
    .box-sizing(border-box);
    width: 100%;
    padding: 5px;
  }
  .modal-body {
    overflow-x: hidden;
    background: @gray-darker;
    textarea {
      .box-sizing(border-box);
      background: @gray-dark;
      color: @gray-lighter;
      width: 100%; border: none;
      padding: 5px;
      font-family: @font-family-monospace;
      font-size: 11px;
      font-weight: normal;
      line-height: 1.2;
      height: 360px;
    }
  }
}

.table.editable {
  tr td.key { width: 160px;}
  tr.editing {
    input {
      border: none;
      background: lighten(@state-warning-bg, 42%);
      .box-sizing(border-box);
      padding: 4px 6px;
      border: none;
      margin: 0;
      font-size: 12px;
    }
    .key input {
      width: 100%;
    }
    .value input {
      width: 140px;
    }

    .editing-actions {
      float: right;
      button {
        padding: 3px 10px;
        font-size: 13px;
      }
    }
  }

  .row-actions {
    opacity: 0.7;
    visibility: hidden;
    float: right;
  }


  td:hover {}
  td:hover .row-actions {
    visibility: visible;
    a {
      cursor: pointer;
      margin-left: 5px;
      color: #111;
    }
  }
}




.notes {
  li { border-bottom: 1px solid #eee; }
  li:last-child { border-bottom: none; }
  li.empty { color: @gray-light; }
  li.archived {
    .meta { background: #efefef;}
    .author { color: #aaa;}
    .note { color: #aaa;}
    text-decoration: line-through; opacity: 0.8;
  }

  .meta { overflow: hidden; .widget-header; padding: 5px 8px;}
  .author { float: left;}
  .actions { float: right;}
  .actions a { margin-left: 15px;}
  .actions a .icon-trash { color: @brand-danger; }
  .actions a .icon-undo { color: @gray-light; }

  .date { font-size: 12px; color: @gray; float: right;}
  .note { .widget-content; display: block; padding: 8px; font-size: 12px; white-space: pre-wrap;}

  ul { height: 320px; overflow-y: scroll; }
  textarea { width: 98%; }
  button { float: right; width: 100px;}
}

#traits-editor {
  textarea {
    .box-sizing(border-box);
    background: @gray-dark;
    color: @gray-lighter;
    width: 100%; border: none;
    padding: 5px;
    font-family: @font-family-monospace;
    font-size: 11px;
    line-height: 1.2;
    height: 300px;
  }
  .error { float: left; color: red; }
}

#application-create {
  margin-top: -360px;
  .modal-body {
    max-height: 800px;
  }
}

.json-export {
  textarea {
    font-family: @font-family-monospace;
    height: 500px;
    font-size: 10px;
  }
}

.remove-owner-entry {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 7px;
  right: 0;
  cursor: pointer;
}

.actionbar {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 100;
  bottom: 0;
  font-size: 12px;
  opacity: 0.95;
  color: #fff;
  background: #006481;
  a {
    color: #fff;
  }
  .actionbar-actions {
    padding: 10px;
    a {
      margin-right: 20px;
    }
  }
  .actionbar-items {
    font-weight: bold;
    padding: 10px;
  }
  .actionbar-clear {
    padding: 10px;
  }
}
